<template>
    <div class='root'>
        <SubNavbar>{{$route.params.game}}</SubNavbar>
        <CateRoomList  :roomMsg='roomMsg' :dataState='dataState' @requestMore='requestRoomMsg' ></CateRoomList>
    </div>
</template>
<script>
    import SubNavbar from '../components/SubNavbar'
    import CateRoomList from '../components/CateRoomList'
    export default{
        data:function(){
            return {
                roomMsg:[],
                dataState:"normal"
            }
        },
        components:{
            SubNavbar,
            CateRoomList,
        },
        mounted:function(){
            this.requestRoomMsg()
        },
        methods:{
            requestRoomMsg(){
                if(this.dataState=='loading'){
                    return 
                }
                this.dataState = 'loading' 
                var url = '/douyu/api/RoomApi/live/'+this.$route.params.id
                this.$ajax.get(url,{
                    params:{
                        offset:Math.floor(this.roomMsg.length/30)
                    }
                })
                .then(res=>{
                   this.roomMsg = this.roomMsg.concat(res.data.data)
                   this.dataState = 'success' 
                },function(){
                    this.dataState = 'fail' 
                })
            }
        }
    }
</script>
<style scoped>
    .root{
        height: 50px;
        background-color: #fff;
    } 
</style>